<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>文档列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <!-- 相关属性
          sortable：列中设置sortable属性即可实现以列为基准的排序，接受一个Boolean，默认为false
          default-sort：Table中设置默认的排序列和排序顺序
        -->
        <el-table
          header-cell-class-name="table_header_list_article"
          :data="articleList"
          border
          style="width: 100%"
          :default-sort="{ prop: 'inputtime', order: 'descending' }"
        >
          <el-table-column prop="id" label="ID" width="50" align="center">
          </el-table-column>
          <el-table-column prop="title" label="文档名称" align="center">
            <template slot-scope="scope">
              <!-- 
                es6里面模板字符串，属于js脚本，给href加上冒号（href里面的代码就变成了js脚本) 
                注意：是小撇号不是单引号
                这种方式属于get传参，路由$route和Query对象里面，$route.query.id就可以找值了
              -->
              <a :href="`/index/art-detail?id=${scope.row.id}`">{{
                scope.row.title
              }}</a>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="inputtime"
            label="发布时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                scope.row.inputtime | timeFilter
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="author"
            label="作者"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="300" align="center"
            ><template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="primary"
                @click="$router.push('/index/art-edit?id=' + scope.row.id)"
                >编辑</el-button
              >
              <el-button
                @click="del(scope.row.id)"
                icon="el-icon-edit"
                size="mini"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页导航条 -->
        <div class="pageNavBar">
          <el-pagination
            style="margin-top: 20px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="pageSize"
            :page-size="5"
            layout="total,sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入文档封装接口
import request from "@/api/article.js";
export default {
  data() {
    return {
      // 每页记录数数组
      pageSize: [2, 3, 4, 5],
      // 文档列表数组
      articleList: [],
      // 分页对象
      pageInfo: {
        curr: 1,
        limit: 5,
        total: 0,
      },
    };
  },
  // 方法
  methods: {
    // 页面加载数据
    loadData() {
      request
        .getArticleList(this.pageInfo)
        .then((r) => {
          console.log(r);
          // 将后台响应的文档数组传递给当前组件状态值变量
          this.articleList = r.data.list;
          this.pageInfo.total = r.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 删除记录
    del(id) {
      this.$confirm("确定删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((r) => {
          // 点击了确定按钮
          request
            .deleteArticle(id)
            .then((r) => {
              console.log(r);
              if (r.data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                // 刷新页面
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((e) => {
              this.$message.error("删除请求异常");
            });
        })
        .catch((e) => {
          // 点击了取消按钮
          this.$message({
            message: "已取消删除",
          });
        });
    },
    // 每页记录数变化触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.limit = val;
      // 加载数据
      this.loadData();
    },
    // 当前页发生变化触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 把val值赋值给状态值中的pageInfo.curr
      this.pageInfo.curr = val;
      // 加载数据
      this.loadData();
    },
  },
  // 钩子函数
  created: function () {
    // 调用加载数据
    this.loadData();
  },
};
</script>

<style>
.table_header_list_article {
  background: #fff !important;
  height: 30px !important;
  line-height: 30px !important;
  color: #000;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
